<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import dcfl01Icon from '@/img/img/dcfl01.png';
import dcfl02Icon from '@/img/img/dcfl02.png';
import dcfl03Icon from '@/img/img/dcfl03.png';
import dcfl04Icon from '@/img/img/dcfl04.png';
import dcfl05Icon from '@/img/img/dcfl05.png';
import dcfl06Icon from '@/img/img/dcfl06.png';
import dcfl07Icon from '@/img/img/dcfl07.png';
import dcfl08Icon from '@/img/img/dcfl08.png';
import dcfl09Icon from '@/img/img/dcfl09.png';
import dcfl10Icon from '@/img/img/dcfl10.png';

const searchText = ref('')

const categories = [
  { id: 1, name: '美食', icon: dcfl01Icon },
  { id: 2, name: '早餐', icon: dcfl02Icon },
  { id: 3, name: '跑腿代购', icon: dcfl03Icon },
  { id: 4, name: '汉堡披萨', icon: dcfl04Icon },
  { id: 5, name: '甜品饮食', icon: dcfl05Icon },
  { id: 6, name: '速食简餐', icon: dcfl06Icon },
  { id: 7, name: '地方小吃', icon: dcfl07Icon },
  { id: 8, name: '米粉面馆', icon: dcfl08Icon },
  { id: 9, name: '包子粥铺', icon: dcfl09Icon },
  { id: 10, name: '炸鸡炸串', icon: dcfl10Icon },
]

const merchantInfo = ref(null);
onMounted(() => {
  axios.get('http://127.0.0.1:4523/m1/5060650-4721896-default/api/mockMerchant')
      .then((response) => {
        merchantInfo.value = response.data;
      })
      .catch((error) => {
        console.error('获取商家信息失败:', error);

      });
});

const activeTab = ref('home');
const merchant= ref([
  {
    id: 1,
    name: '美味饺子馆',
    imageUrl: '@img/img/sj01.png',
    isNewStore: true,
    rating: 4.5,
    monthlySales: 120,
    deliveryType: '蜂鸟专送',
    minOrderAmount: 20,
    deliveryFee: 3,
    distance: 3.2,
    deliveryTime: 30,
    tags: ['饺子', '特色美食'],
    newUserDiscount: 10,
    specialOffer: 5,
    activityCount: 2
  }
]);
const router = useRouter();
const goTo = (path) => {
  router.push(path);
};

</script>

<template>
  <div class="container">
    <!-- 地理位置显示 -->
    <div class="location-container">
      <i class="el-icon-location"></i>
      <span class="location-text">沈阳市规划大厦</span>
      <i class="el-icon-arrow-down"></i>
    </div>

    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
          placeholder="搜索饿了么商家、商品名称"
          class="search-input"
          v-model="searchText"
      >
        <template #append>
          <i class="el-icon-search"></i>
        </template>
      </el-input>
    </div>

    <!-- 分类列表 -->
    <div class="category-container">
      <div v-for="category in categories" :key="category.id" class="category-item">
        <img :src="category.icon" :alt="`${category.name}图标`" />
        <span>{{ category.name }}</span>
      </div>
    </div>
  </div>

  <!-- 横幅广告部分 -->
  <div class="banner">
    <h3>品质套餐</h3>
    <p> 搭配齐全吃得好</p>
    <a href="">立即抢购 &gt;</a>
  </div>

  <!-- 超级会员部分 -->
  <div class="supermember">
    <div class="left">
      <img src="@/img/img/super_member.png">
      <h3>超级会员</h3>
      <p>&#8226; 每月享超级权益</p>
    </div>
    <div class="right">
      立即开通 &gt;
    </div>
  </div>



  <!-- 商家信息部分 -->
  <div v-if="merchantInfo" class="merchant-info">
    <div class="merchant-header">
      <img :src="merchantInfo.imageUrl" alt="商家图片" class="merchant-image">
      <div class="merchant-name-container">
        <span class="merchant-name">{{ merchantInfo.name }}</span>
        <span class="new-store-tag" v-if="merchantInfo.isNewStore">新店</span>
      </div>
    </div>
    <div class="merchant-rating">
      <span class="rating-stars">★★★★★</span>
      <span class="rating-value">{{ merchantInfo.rating }}</span>
      <span class="monthly-sales">{{ merchantInfo.monthlySales }}月售{{ merchantInfo.monthlySales }}单</span>
    </div>
    <div class="merchant-delivery">
      <span class="delivery-type">{{ merchantInfo.deliveryType }}</span>
    </div>
    <div class="merchant-price">
      <span class="min-order-amount">¥{{ merchantInfo.minOrderAmount }}起送</span>
      <span class="delivery-fee">| ¥{{ merchantInfo.deliveryFee }}配送</span>
    </div>
    <div class="merchant-distance">
      <span>{{ merchantInfo.distance }}km | {{ merchantInfo.deliveryTime }}分钟</span>
    </div>
    <div class="merchant-tags">
      <span v-for="tag in merchantInfo.tags" :key="tag">{{ tag }}</span>
    </div>
    <div class="merchant-activities">
      <div class="activity-item" v-if="merchantInfo.newUserDiscount">
        <span class="activity-icon new-icon">新</span>
        <span class="activity-text">{{ merchantInfo.newUserDiscount }}</span>
      </div>
      <div class="activity-item" v-if="merchantInfo.specialOffer">
        <span class="activity-icon special-icon">特</span>
        <span class="activity-text">{{ merchantInfo.specialOffer }}</span>
      </div>
      <span class="activity-count" v-if="merchantInfo.activityCount > 0">{{ merchantInfo.activityCount }}个活动</span>
    </div>
  </div>

  <div v-else class="merchant-info1">


    <!--    推荐部分          -->
    <div class="merchant-header1">
      <div style="display: flex; justify-content: center;border: 0;font-family: SimHei, sans-serif;">
        ---推荐商家---
      </div>
      <div class="container1">
        <div>综合排序</div>
        <div>距离最近</div>
        <div>销量最高</div>
        <div>筛选</div>
      </div>
    </div>
    <!--推荐商家列表部分-->

    <ul class="business">
      <li><img src="@/img/img/sj01.png" >
        <div class="business-info">
          <div class="business-info-h">
            <h3>万家饺子(软件园E18店)</h3>
            <div class="business-info-like">&#8226;</div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">

              <p>4.9 月售345单</p>
            </div>
            <div class="business-info-star-right">蜂鸟专送</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;15起送 | &#165;3配送</p>
            <p>3.22km | 30分钟</p>
          </div>
          <div class="business-info-explain">
            <div>各种饺子</div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" >新</div>
              <p>饿了么新用户首单立减9元</p>
            </div>
            <div class="business-info-promotion-right">
              <p>2个活动</p>
              <i class="fa fa-caret-down"></i></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
              <p>特价商品5元起</p>
            </div>
          </div>
        </div>
      </li>
      <li><img src="@/img/img/sj02.png" >
        <div class="business-info">
          <div class="business-info-h">
            <h3>小锅饭豆腐馆(全运店)</h3>
            <div class="business-info-like">&#8226;</div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">

              <p></p>
            </div>
            <div class="business-info-star-right">蜂鸟专送</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;15起送 | &#165;3配送</p>
            <p>3.22km | 30分钟</p>
          </div>
          <div class="business-info-explain">
            <div></div>
            <div></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" >新</div>
              <p>饿了么新用户首单立减9元</p>
            </div>
            <div class="business-info-promotion-right">
              <p>2个活动</p>
              <i class="fa fa-caret-down"></i></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
              <p>特价商品5元起</p>
            </div>
          </div>
        </div>
      </li>
      <li><img src="@/img/img/sj03.png" >
        <div class="business-info">
          <div class="business-info-h">
            <h3>麦当劳麦乐送（全运路店）</h3>
            <div class="business-info-like">&#8226;</div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">

              <p></p>
            </div>
            <div class="business-info-star-right">蜂鸟专送</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;15起送 | &#165;3配送</p>
            <p>3.22km | 30分钟</p>
          </div>
          <div class="business-info-explain">
            <div></div>
            <div></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" >新</div>
              <p>饿了么新用户首单立减9元</p>
            </div>
            <div class="business-info-promotion-right">
              <p>2个活动</p>
              <i class="fa fa-caret-down"></i></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
              <p>特价商品5元起</p>
            </div>
          </div>
        </div>
      </li>
      <li><img src="@/img/img/sj04.png" >
        <div class="business-info">
          <div class="business-info-h">
            <h3>米村拌饭(浑南店)</h3>
            <div class="business-info-like">&#8226;</div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">

              <p></p>
            </div>
            <div class="business-info-star-right">蜂鸟专送</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;15起送 | &#165;3配送</p>
            <p>3.22km | 30分钟</p>
          </div>
          <div class="business-info-explain">
            <div></div>
            <div></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" >新</div>
              <p>饿了么新用户首单立减9元</p>
            </div>
            <div class="business-info-promotion-right">
              <p>2个活动</p>
              <i class="fa fa-caret-down"></i></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
              <p>特价商品5元起</p>
            </div>
          </div>
        </div>
      </li>
      <li><img src="@/img/img/sj05.png">
        <div class="business-info">
          <div class="business-info-h">
            <h3>申记串道(中海康城店)</h3>
            <div class="business-info-like">&#8226;</div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">

              <p></p>
            </div>
            <div class="business-info-star-right">蜂鸟专送</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;15起送 | &#165;3配送</p>
            <p>3.22km | 30分钟</p>
          </div>
          <div class="business-info-explain">
            <div></div>
            <div></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" >新</div>
              <p>饿了么新用户首单立减9元</p>
            </div>
            <div class="business-info-promotion-right">
              <p>2个活动</p>
              <i class="fa fa-caret-down"></i></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
              <p>特价商品5元起</p>
            </div>
          </div>
        </div>
      </li>
      <li><img src="@/img/img/sj06.png" >
        <div class="business-info">
          <div class="business-info-h">
            <h3>半亩良田排骨米饭</h3>
            <div class="business-info-like">&#8226;</div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">

              <p></p>
            </div>
            <div class="business-info-star-right">蜂鸟专送</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;15起送 | &#165;3配送</p>
            <p>3.22km | 30分钟</p>
          </div>
          <div class="business-info-explain">
            <div></div>
            <div></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" >新</div>
              <p>饿了么新用户首单立减9元</p>
            </div>
            <div class="business-info-promotion-right">
              <p>2个活动</p>
              <i class="fa fa-caret-down"></i></div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left">
              <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
              <p>特价商品5元起</p>
            </div>
          </div>
        </div>
      </li>
    </ul>




  </div>


  <div class="fixed-buttons">
    <el-row justify="space-around">
      <el-col :span="6">
        <el-button type="text" @click="goTo('/index')">

          <span>首页</span>
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="text" @click="goTo('/order')">

          <span>订单</span>
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="text" @click="goTo('/discover')">

          <span>发现</span>
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="text" @click="goTo('/my')">

          <span>我的</span>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.container {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  text-align: center;

}

.location-container {
  background-color: #007aff;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
}

.location-text {
  font-size: 16px;
}

.search-container {
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.search-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
  padding: 5px;
}

/* 分类布局 */
.category-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 每行显示 5 个 */


  gap: 10px; /* 减少图标之间的间距 */
  padding: 15px; /* 调整整体的填充 */
  width: 100%;
  box-sizing: border-box;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中对齐内容 */
  justify-content: center;
  padding: 10px; /* 减少内部填充 */
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
  cursor: pointer;
}

.category-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 0px; /* 减少图标与文字之间的间距 */
  transition: transform 0.3s ease; /* 鼠标悬停时图标放大 */
}

.category-item span {
  display: block;
  font-size: 10px;
  color: #333; /* 文字颜色 */
}

.category-item:hover {
  background-color: #f1f1f1; /* 鼠标悬停时背景色变化 */
}

.category-item:hover img {
  transform: scale(1.1); /* 鼠标悬停时图标放大 */
}

.category-item:hover span {
  color: #007aff; /* 鼠标悬停时文字颜色变化 */
}

/* 横幅广告样式 */
.banner {
  width: 95%;
  height: 29vw;
  margin: 0 auto;
  background-image: url(@/img/img/index_banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding: 2vw 6vw;
}

.banner h3 {
  font-size: 4.2vw;
  margin-bottom: 1.2vw;
}

.banner p {
  font-size: 3.4vw;
  color: #666;
  margin-bottom: 2.4vw;
  text-align: left;
}

.banner a {
  font-size: 3vw;
  color: #c79060;
  font-weight: 700;
}

/* 超级会员样式 */
.supermember {
  margin: 0 auto;
  width: 95%;
  height: 11.5vw;
  background-color: #FEEDC1;
  margin-top: 1.3vw;
  border-radius: 2px;
  color: #644F1B;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.supermember .left {
  display: flex;
  align-items: center;
  margin-left: 4vw;
  user-select: none;
}

.supermember .left img {
  height: 6vw;
  width: 6vw;
  margin-right: 2vw;
}

.supermember .left h3 {
  font-size: 4vw;
  margin-right: 2vw;
}

.supermember .left p {
  font-size: 3vw;
}

.supermember .right {
  font-size: 3vw;
  margin-right: 4vw;
  cursor: pointer;
}
/*商家信息部分*/
.merchant-info {
  border: 1px solid #ccc;
  padding: 10px;
}
.merchant-info1{
  padding: 10px;
}
.merchant-header {
  display: flex;
  align-items: center;
}

.merchant-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.merchant-name-container {
  display: flex;
  flex-direction: column;
}

.merchant-name {
  font-size: 16px;
  font-weight: bold;
}

.new-store-tag {
  background-color: green;
  color: white;
  padding: 2px 5px;
  font-size: 12px;
  margin-left: 5px;
}

.merchant-rating {
  margin-top: 5px;
}

.rating-stars {
  color: gold;
}

.rating-value {
  font-size: 14px;
  margin-left: 5px;
}

.monthly-sales {
  font-size: 12px;
  margin-left: 5px;
}

.merchant-delivery {
  margin-top: 5px;
}

.merchant-price {
  margin-top: 5px;
}

.merchant-distance {
  margin-top: 5px;
}

.merchant-tags {
  margin-top: 5px;
}

.activity-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.activity-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.new-icon {
  background-color: green;
}

.special-icon {
  background-color: orange;
}

.activity-text {
  font-size: 12px;
}

.activity-count {
  font-size: 12px;
  margin-left: 10px;
}

p {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.recommend-container {
  margin: 20px;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sort-options {
  display: flex;
  align-items: center;
}

.sort-options.el-select {
  width: 120px;
}
.erchant-header1{
    display: flex;
   align-items: center;
  font-family: SimHei, sans-serif;
}
.activity-icon special-icon1{
  display: flex;
  align-items: center;
  ont-family: SimHei, sans-serif;
  margin-left: 40px;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

.container1 div {
  /* 可以根据实际需求设置每个板块的样式，这里简单设置宽度和边框以便查看效果 */
  width: 100px;
  font-size: 14px;
  text-align: center;
}

.wrapper .business{
  width: 100%;
  padding-bottom: 14vw;
}

.wrapper .business li{
  width: 100%;
  display: flex;
  padding: 2.5vw;
  box-sizing: border-box;
  user-select: none;
  border: solid 1px #DDD;
  /*justify-content: space-around;*/


}
 .business li img {
  width: 18vw;
  height: 18vw;
}
 .business li .business-info{
  width:80% ;
  box-sizing: border-box;
  padding-left: 3vw;
}
 .business li .business-info .business-info-h{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
}
 .business li .business-info .business-info-h h3{
  font-size: 4vw;
  color: #333;
}
 .business li .business-info .business-info-like{
  width: 1.6vw;
  height: 3.4vw;
  background-color: #666;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  margin-right: 4vw;
}
 .business li .business-info .business-info-star{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:2vw ;
  font-size: 3.1vw;
}
 .business li .business-info .business-info-star .business-info-star-left{
  display: flex;
  align-items: center;

}
 .business li .business-info .business-info-star.business-info-star-left.fa-star{
  color: #FEC80E;
  margin-right: 0.5vw;

}
 .business li .business-info .business-info-star.business-info-star-left p{
  color: #666;
  margin-right: 1vw;
}
 .business li .business-info .business-info-star.business-info-star-right{
  background-color: #0097FF;
  color: #fff;
  font-size: 2.4vw;
  border-radius: 2px;
  padding: 0  0.6vw;
}

 .business li .business-info .business-info-delivery{
  display:flex ;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  color: #666;
  font-size: 3.1vw;
}
 .business li .business-info .business-info-explain{
  display: flex;
  align-items: center;
  margin-bottom: 3vw;

}

 .business li .business-info .business-info-explain div{
  border: solid 1px #DDD;
  font-size: 2.8vw;
  color: #666;
  border-radius: 3px;
  padding: 0 0.1vw;

}
 .business li .business-info .business-info-promotion{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8vw;
}

 .business li .business-info .business-info-promotion .business-info-promotion-left{
  display: flex;
  align-items: center;

}
 .business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-incon{
  width: 4vw;
  height: 4vw;
  background-color: #70BC46;
  font-size: 3vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
 .business li .business-info .business-info-promotion .business-info-promotion-left p{
  color: #666;
  font-size: 3vw;
  margin-left: 2vw;
}
 .business li .business-info .business-info-promotion .business-info-promotion-right{
  display: flex;
  align-items: center;
  font-size: 2.5vw;
  color:#999 ;

}
 .business li .business-info .business-info-promotion .business-info-promotion-right p{
  margin-right:2vw ;
}





/* 底部固定按钮样式 */
.fixed-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px 0;
  border-top: 1px solid #ccc;
}
</style>
